<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>
            <div class="center">
                <el-row>
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入博客标题"
                            v-model="title">
                    </el-input>
                </el-row>
                <el-row>
                    <el-select v-model="value" placeholder="科目">
                        <el-option
                                v-for="opition in options"
                                :key="opition.value"
                                :label="opition.label"
                                :value="opition.value">
                        </el-option>
                    </el-select>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-input
                            type="textarea"
                            :rows="8"
                            placeholder="请输入博客内容"
                            v-model="content">
                    </el-input>
                    <el-button type="primary" class="sendbutton" style="margin-top: 10px" @click="draft">撰写博客
                    </el-button>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import PageFooter from "../../components/base/pageFooter";
    import CliTitleStudent from "../../components/base/cliTitleStudent";
    import Cookies from "js-cookie";
    import POST from "../../api/POST";

    export default {
        name: "draftblog",
        components: {CliTitleStudent, PageFooter},
        data() {
            return {
                options: [{
                    value: '1',
                    label: '语文'
                }, {
                    value: '2',
                    label: '数学'
                }, {
                    value: '3',
                    label: '英语'
                }, {
                    value: '4',
                    label: '物理'
                }, {
                    value: '5',
                    label: '化学'
                }, {
                    value: '6',
                    label: '生物'
                }, {
                    value: '7',
                    label: '历史'
                }, {
                    value: '8',
                    label: '政治'
                }, {
                    value: '9',
                    label: '地理'
                }],
                value: '',
                id: '',
                info: [],
                title: '',
                content: ''
            }
        }
        ,
        methods: {
            draft() {
                let data = {
                    'account': this.id,
                    'title': this.title,
                    'content': this.content,
                    'type': this.options[this.value-1].label.toString()
                }
                POST.draftBlog(data).then(res => {

                })
                this.$router.push({path: '/personal/home'});

            }
        },
        mounted() {
            this.info = Cookies.get('info');
            this.info = JSON.parse(this.info);
            console.log(this.info);
            this.id = this.info.account;
            console.log(this.id);
        }
    }
</script>

<style scoped>
    .center {
        width: 700px;
        margin: 50px auto;
    }
</style>